<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考试管理</title>
    <div th:replace="include/bootstrap :: bootstrap"></div>
    <style>
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .table-responsive {
            border: none;
            margin-bottom: 15px;
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .panel-heading {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
        
        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .panel-body {
            padding: 20px;
        }
        
        .btn-primary {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
        
        .btn-success {
            background-color: #2ecc71;
            border-color: #2ecc71;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
            border-color: #27ae60;
        }
        
        .btn-danger {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }
        
        .btn-info {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .btn-info:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
        
        .pagination > .active > a {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .pagination > .active > a:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
    </style>
</head>
<body>
<div th:replace="include/TeacherNav :: TeacherNav"></div>

<div class="main-content">
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">考试管理</h3>
            </div>
            <div class="panel-body">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <button class="btn btn-primary btn-sm" onclick="add()">
                            <i class="glyphicon glyphicon-plus"></i> 添加新试卷
                        </button>
                        <button class="btn btn-danger btn-sm" id="getAllSelectedId">
                            <i class="glyphicon glyphicon-trash"></i> 批量删除
                        </button>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th width="5%"><input type="checkbox" id="allAndNotAll" /> 全选</th>
                                <th width="5%">编号</th>
                                <th width="15%">试卷名称</th>
                                <th width="8%">单选题数量</th>
                                <th width="8%">单选题分值</th>
                                <th width="8%">多选题数量</th>
                                <th width="8%">多选题分值</th>
                                <th width="15%">考试日期</th>
                                <th width="8%">考试时间</th>
                                <th width="20%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${examlist.content.isEmpty()}">
                                <td colspan="10" class="text-center">暂无数据</td>
                            </tr>
                            <tr th:each="examlist: ${examlist.getContent()}">
                                <td><input type="checkbox" name="items" th:id="${examlist.eid}"/></td>
                                <td th:text="${examlist.eid}"></td>
                                <td th:text="${examlist.pname}"></td>
                                <td th:text="${examlist.singlenumber}"></td>
                                <td th:text="${examlist.singlecore}*${examlist.singlenumber}"></td>
                                <td th:text="${examlist.multiplenumber}"></td>
                                <td th:text="${examlist.multiplecore}*${examlist.multiplenumber}"></td>
                                <td th:text="${examlist.examdate}+'至'+${examlist.examtime}"></td>
                                <td th:text="${examlist.testtime}+'分钟'"></td>
                                <td>
                                    <a th:onclick="'javascript:edit(\''+${examlist.eid}+'\');'" class="btn btn-success btn-xs">
                                        <i class="glyphicon glyphicon-pencil"></i> 修改
                                    </a>
                                    <a th:onclick="'javascript:trash(\''+${examlist.eid}+'\');'" class="btn btn-danger btn-xs" 
                                       data-toggle="modal" data-target="#trashModal">
                                        <i class="glyphicon glyphicon-trash"></i> 删除
                                    </a>
                                    <a th:href="@{'./paperDetails?eid='+${examlist.eid}}" class="btn btn-info btn-xs">
                                        <i class="glyphicon glyphicon-file"></i> 考卷详情
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页信息 -->
                <div class="row">
                    <div class="col-md-6">
                        当前 <span th:text="${examlist.getNumber()} + 1"></span> 页，
                        共 <span th:text="${examlist.totalPages}"></span> 页，
                        共 <span th:text="${examlist.totalElements}"></span> 条记录
                    </div>
                    <div class="col-md-6">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li th:class="${examlist.first ? 'disabled' : ''}">
                                    <a th:href="@{/selectexam}">首页</a>
                                </li>
                                <li th:class="${examlist.hasPrevious() ? '' : 'disabled'}">
                                    <a th:href="@{/selectexam(pageNum = ${examlist.hasPrevious()} ? ${examlist.getNumber() } : 1)}">上一页</a>
                                </li>
                                <li th:class="${examlist.hasNext() ? '' : 'disabled'}">
                                    <a th:href="@{/selectexam(pageNum = ${examlist.hasNext()} ? ${examlist.getNumber()} + 2 : ${examlist.totalPages})}">下一页</a>
                                </li>
                                <li th:class="${examlist.last ? 'disabled' : ''}">
                                    <a th:href="@{/selectexam(pageNum = ${examlist.totalPages})}">末页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--编辑模态框-->
<div class="modal fade" id="examdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="Label">编辑试卷信息</h4>
            </div>
            <form class="form-horizontal" th:action="@{/updateExam}" method="post">
                <div class="modal-body">
                    <input name="eid" id="eid" hidden="hidden"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">试卷名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="pname" class="form-control" id="pname">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">所属课程</label>
                        <div class="col-sm-5">
                            <select class="form-control" id="cno" name="cno">
                            </select>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">命题人</label>
                        <div class="col-sm-10">
                            <input type="text" name="userid" class="form-control" id="userid"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属班级</label>
                        <div class="col-sm-5">
                            <select class="form-control" id="classid" name="classid">
                            </select>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">单选题数量</label>
                        <div class="col-sm-10">
                            <input type="text" name="singlenumber" class="form-control" id="singlenumber"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group ">
                    <label class="col-sm-2 control-label">单选题每题分值</label>
                    <div class="col-sm-10">
                        <input type="text" name="singlecore" class="form-control" id="singlecore"
                               placeholder="">
                        <span class="help-block"></span>
                    </div>
                </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">多选题数量</label>
                        <div class="col-sm-10">
                            <input type="text" name="multiplenumber" class="form-control" id="multiplenumber"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">多选题每题分值</label>
                        <div class="col-sm-10">
                            <input type="text" name="multiplecore" class="form-control" id="multiplecore"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">开始时间</label>
                        <div class="col-sm-10">
                            <input type="date" name="examdate" class="form-control" id="examdate"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">结束时间</label>
                        <div class="col-sm-10">
                            <input type="date" name="examtime" class="form-control" id="examtime"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">考试时间（分钟）</label>
                        <div class="col-sm-10">
                            <input type="text" name="testtime" class="form-control" id="testtime"
                                   placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="tch_save_btn">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--删除的模态框-->
<div class="modal fade" id="trashModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模糊框头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
                <h4 class="modal-title">删除确认</h4>
            </div>
            <!-- 模糊框主体 -->
            <div class="modal-body">
                <strong>将删除与该试卷有关的所有数据，是否继续？</strong>
            </div>
            <!-- 模糊框底部 -->
            <div class="modal-footer">
                <button type="button" class="delSure btn btn-danger" data-dismiss="modal">确定删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        //实现全选与反选
        $("#allAndNotAll").click(function() {
            if (this.checked){
                $("input[name='items']:checkbox").each(function(){
                    $(this).prop("checked", true);
                });
            } else {
                $("input[name='items']:checkbox").each(function() {
                    $(this).prop("checked", false);
                });
            }
        });
        
        //获取被选中的id
        $('#getAllSelectedId').click(function(){
            var ids = new Array();
            $("input[name='items']:checked").each(function(){
                ids.push($(this).attr("id"));
            });
            
            if(ids.length == 0){
                alert("请选择要删除的数据！");
            } else {
                if(confirm('将删除与这些试卷有关的所有数据，是否继续?')){
                    location.href = "deleteManyExam?ids="+ids;
                }
            }
        });
    });
    
    function add() {
       window.location.href="/addexam";
    }
    
    //删除
    function trash(eid) {
        if (!eid) {
            alert("错误：未获取到考试ID");
        } else {
            $(".delSure").click(function () {
                window.location.href="/deleteExam?eid="+eid;
            });
        }
    }
    
    // 编辑信息的方法
    function edit(eid) {
        // 清空下拉框避免重复添加
        $("#cno").empty();
        $("#classid").empty();
        
        $.ajax({
            url: '/findAllCourse',
            type: 'get',
            success: function (data) {
                $("#cno").append("<option value=''>-- 请选择课程 --</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#cno").append("<option value='" + data[i].cno + "'>" + data[i].cname + "</option>");
                }
            }
        });
        
        $.ajax({
            url: '/findAllClass',
            type: 'get',
            success: function (data) {
                $("#classid").append("<option value=''>-- 请选择班级 --</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#classid").append("<option value='" + data[i].classid + "'>" + data[i].classname + "</option>");
                }
            }
        });
        
        if (!eid) {
            alert("错误：未获取到考试ID");
        } else {
            // 先去查询数据
            $.ajax({
                url: '/findByOneExam',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                    eid: eid
                }),
                success: function (data) {
                    $("#eid").val(data.eid);
                    $("#pname").val(data.pname)
                    $("#cno").val(data.cno);
                    $("#userid").val(data.userid);
                    $("#classid").val(data.classid);
                    $("#singlenumber").val(data.singlenumber);
                    $("#singlecore").val(data.singlecore);
                    $("#multiplenumber").val(data.multiplenumber);
                    $("#multiplecore").val(data.multiplecore);
                    $('#examdate').val(data.examdate);
                    $('#examtime').val(data.examtime);
                    $('#testtime').val(data.testtime);
                    $("#examdit").modal('show');
                },
                error: function () {
                    alert("获取考试数据失败");
                }
            });
        }
    }
</script>
</body>
</html>